import React, { useEffect, useState } from 'react';
import { Space, Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import { getGroup, updateGroup_out,GroupSearch } from '../../../request/api'
import { useDispatch, useSelector } from 'react-redux';
import { setIsGroup, setStoreList } from '../../../store/module/store';



const App: React.FC = () => {
  const dispatch = useDispatch()
  let is_group = useSelector((state: any) => state.storeList.is_group)
  let look_list = useSelector((state: any) => state.storeList.look_list)
  interface DataType {
    name: String,//团长姓名
    phone: String,//联系方式
    pick_name: String,//自提点名称
    pick_address: String,//自提点地址
    pick_type: String,//自提点类型
    examine_name: String,//审核人
    examine_type: String,//审核状态
    examine_time: String,//审核时间
    void_text: String,//作废理由
    deal_price: Number,//成交金额
    deal_num: Number,//成交数量
    statue: String,//状态
    label: String,//标签
  }

  const columns: TableProps<DataType>['columns'] = [
    { title: 'ID', dataIndex: 'key', },
    { title: '申请时间', dataIndex: 'examine_time' },
    { title: '姓名', dataIndex: 'name', },
    { title: '手机号', dataIndex: 'phone', },
    { title: '自提点名称', dataIndex: 'pick_name', },
    { title: '自提点地址', dataIndex: 'pick_address', },
    { title: '自提点类型', dataIndex: 'pick_type', },
    { title: '审核人', dataIndex: 'examine_name', },
    { title: '作废原因', dataIndex: 'void_text', },
    {
      title: '操作', dataIndex: '',
      render: (text: string) => <a onClick={() => out_group(text.key)}>撤回</a>,
    },
  ]


  const [group_list, setGroup_list] = useState([])
  const [group_label, setGroup_label] = useState([])

  useEffect(() => {
    get_group()
  }, [is_group])

  //获取数据
  const get_group = async () => {
    if (look_list) {
      let res = await GroupSearch({ look_list: look_list })
      setGroup_list(res.data.filter(item => item.examine_type === '已作废'))
      dispatch(setStoreList({}))
    } else {
      let res = await getGroup({})
      setGroup_list(res.group_list.filter(item => item.examine_type === '已作废'))
    }
  }
  const dataSource = group_list.map((item: any) => ({
    key: item._id,
    ID: item.key,
    name: item.name,//团长姓名
    phone: item.phone,//联系方式
    pick_name: item.pick_name,//自提点名称
    pick_address: item.pick_address,//自提点地址
    pick_type: item.pick_type,//自提点类型
    examine_name: item.examine_name,//审核人
    examine_type: item.examine_type,//审核状态
    examine_time: item.examine_time,//审核时间
    void_text: item.void_text,//作废理由
    deal_price: item.deal_price,//成交金额
    deal_num: item.deal_num,//成交数量
    statue: item.statue,//状态
    label: item.label,//标签
  }))


  const out_group = async (id: string) => {
    if (window.confirm('确定撤回吗？')) {
      let res = await updateGroup_out({ id })
      if (res.code === 200) {
        get_group()
        dispatch(setIsGroup())
      }
    }
  }

  return (
    <Table<DataType> columns={columns} dataSource={dataSource} 
    pagination={{
      pageSize: 6,
      showQuickJumper: true,
      position:['bottomLeft']
    }}/>
  )
}

export default App;